<script setup lang="ts"></script>
<template>
    <div class="f-page f-page-navigate">
        <f-splitter class="f-page-content">
            <f-splitter-pane position="left">
                <div>This is navigation panel on left.</div>
            </f-splitter-pane>
            <f-splitter-pane position="center">
                <f-splitter class="f-page-content" direction="column">
                    <f-splitter-pane position="left">
                        <div>This is navigation panel on top.</div>
                    </f-splitter-pane>
                    <f-splitter-pane position="center"> This is navigation panel on center. </f-splitter-pane>
                    <f-splitter-pane position="right">
                        <div>This is navigation panel on bottom.</div>
                    </f-splitter-pane>
                </f-splitter>
            </f-splitter-pane>
            <f-splitter-pane position="right">
                <div>This is navigation panel on right.</div>
            </f-splitter-pane>
        </f-splitter>
    </div>
</template>
